<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>仿windows10开始菜单的下拉导航菜单特效|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css" />
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
	<link rel="stylesheet" type="text/css" href="css/styles.css">
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<div id="top-bar" class="top-bar">
		  <div class="bar">
		    <button id="navbox-trigger" class="navbox-trigger"><i class="fa fa-lg fa-th"></i></button>
		  </div>
		  <div class="navbox">
		    <div class="navbox-tiles">
			    <a href="#" class="tile">
			        <div class="icon"><i class="fa fa-home"></i></div><span class="title">Home</span>
			    </a>
			    <a href="#" class="tile">
			        <div class="icon"><i class="fa fa-camera-retro"></i></div><span class="title">Gallery</span>
			    </a>
			    <a href="#" class="tile">
			        <div class="icon"><i class="fa fa-question-circle"></i></div><span class="title">FAQ</span>
			    </a>
			   	<a href="#" class="tile">
			        <div class="icon"><i class="fa fa-lg fa-envelope-o"></i></div><span class="title">Contact</span>
			   	</a>
			   	<a href="#" class="tile">
			        <div class="icon"><i class="fa fa-wordpress"></i></div><span class="title">Blog</span>
			    </a>
		    </div>
		  </div>
	</div>

	
	<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
	<script>
	(function () {
	    $(document).ready(function () {
	        $('#navbox-trigger').click(function () {
	            return $('#top-bar').toggleClass('navbox-open');
	        });
	        return $(document).on('click', function (e) {
	            var $target;
	            $target = $(e.target);
	            if (!$target.closest('.navbox').length && !$target.closest('#navbox-trigger').length) {
	                return $('#top-bar').removeClass('navbox-open');
	            }
	        });
	    });
	}.call(this));
	</script>
</body>
</html>